<ion-header>
  <ion-toolbar color="winter">
    <ion-buttons left>
      <button (click)="goBack()" ion-button icon-only>
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title algin="center">套餐详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="content-primary">
  <ion-grid no-padding>
    <ion-row class="bg-white m-t b-b-light p">
      <ion-col col-12 class='f-1-5'>&yen;{{price}} {{product.PRODUCT_NAME}}
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid *ngFor="let item of items;let i = index;" class='cart-main package-main'>
    <ion-row>
      <ion-col (click)="goGoodsDetail(item)" col-3>
        <img [src]="imgUrl+item['IMAGE_LINK']" onerror='this.src="../../../assets/img/null-img.png"' class="small-pic">
      </ion-col>
      <ion-col>
        <ion-row>
          <ion-col col-12 class='p-l-0'>
            <span (click)="goGoodsDetail(item)" class="name">
              {{item.PRODUCT_NAME}}
            </span>
          </ion-col>
          <!-- <ion-col col-12 class='p-l-0'>
            <span class="pv">
              PV: +${{orderType == '30' ? item.MP_PV : item.FP_PV}}
            </span>
          </ion-col> -->
        </ion-row>
      </ion-col>
      <ion-col col-3 class="no-padding text-right">
        <ion-row>
          <!-- <ion-col text-right col-12 class="price">
            &yen;&nbsp;125.00
          </ion-col> -->
          <ion-col text-right col-12 class="number text-gray">
            ×&nbsp;{{item.QTY}}
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-grid no-padding>
    <ion-row class="bg-white p">
      <ion-col col-6 class='f-1-5'>商品金额</ion-col>
      <ion-col col-6 text-right>
        <span class="text-price f-1-5">&yen;{{ price }}</span>
      </ion-col>
    </ion-row>
    <ion-row class="bg-white m-t p" *ngIf="!isFirst">
      <ion-col col-6 class='f-1-5'>商品数量</ion-col>
      <ion-col col-6>
        <div>
          <span class="num-container">
            <label class="reduce" (click)="reduce()">
              <i class="iconfont icon-gouwuche-shuliangjian"></i>
            </label>
            <input type="number" class="number" value="{{product.QTY}}" [(ngModel)]="product.QTY" (ngModelChange)="inputCheck()">
            <label class="add" (click)="add()">
              <i class="iconfont icon-gouwuche-shuliangjia"></i>
            </label>
          </span>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- info -->
  <ion-row class="wrap">
    <p class="description">{{remark}}</p>
  </ion-row>
</ion-content>

<ion-footer class='goods-footer' *ngIf="!isFirst">
  <ion-toolbar no-padding>
    <ion-row>
      <ion-col (click)="goHome()" class="b-r-light" text-center col-2>
        <i class="iconfont i-cart">&#xe637;</i>
        <p no-margin class="tip">首页</p>
      </ion-col>
      <ion-col (click)="goCart()" text-center col-2>
        <i class="iconfont i-cart">&#xe633;</i>
        <p no-margin class="tip">购物车</p>
      </ion-col>
      <ion-col no-padding col-8>
        <button (click)="addCart()" class="btn-cart" ion-button>
          加入购物车
        </button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>